<template>    
        <div class="Gift-view-layout">
	          <div class="step1">
	          	<img :src="$imgPath(userobj.headImg)" v-if="img1==''"/>				  
                <img :src="$imgPath(img1)" v-else>
	          	<div class="uploadFileDiv">
	          		<div class="uploadFile">
	          			<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput1" @change="changeImg($event)"/>
                        <span>上传头像</span>	
	          		</div>
	          		<p>jpg或png格式（不支持gif格式），最大不超过3M</p>          		
	          	</div>	          	
	          	<div class="myClear"></div>
	          </div>
	          <div class="step">
	          	<div class="title">
	          		<span></span><span>基础资料</span><span>标题*为必填项，请务必填写真实资料</span>
	          	</div>
	          	<div class="basicsForm">
	          		<div class="form1">
	          		    <span class="hint">*</span><span class="name">昵称：</span><input type="text" class="margin-r" v-model="userobj.nickname"/>
						<span class="hint">*</span><span class="name">性别：</span>  
						<label>
                        	<span class="radio_square" :class="[userobj.sex == 1 ? 'checked' : '']" @click="userobj.sex = 1">
                                <input id="minimal-radio-9" name="minimal-radio"  type="radio">
                            </span> 男
                        </label>
						<label>
                            <span class="radio_square" :class="[userobj.sex == 2 ? 'checked' : '']" @click="userobj.sex = 2">
                                <input id="minimal-radio-8" name="minimal-radio"  type="radio">
                            </span>女
                        </label> 
						<label>
                            <span class="radio_square" :class="[userobj.sex == 0 ? 'checked' : '']" @click="userobj.sex = 0">
                                <input id="minimal-radio-7" name="minimal-radio"  type="radio">
                            </span>未知
                        </label>                      
	          		</div>
	          		<div class="form2">
	          			<span class="hint">*</span><span class="name">Q&nbsp;Q：</span><input type="number" class="margin-r" v-model="userobj.qq"/>
	          			<span class="hint">*</span><span class="name">出生日期：</span>
						<em class="margin-r">
							<DatePicker type="date" v-model="datePicker" style="width: 240px;height:46px;"></DatePicker>
						</em>
	          		</div>   
	          	</div>
              </div>
	          <div class="step">	
                  <div class="title">
                     <span></span><span>辅助资料</span><span>以下资料为选填内容，资料完整的陪玩导师优先获得首页推荐</span> 
                  </div>
                  <div class="assistForm">
	                  	<div class="hobbyList">	          
	                  		<div class="hobbyTitle">
	                  			兴趣爱好：
	                  		</div>
	                  		<div class="hobbys">
	                  			<ul>
	                  				<li v-for="(val,index) in hobbyList" :key="index" @click="selectHobby(index,val.name)" :class="[val.class == true ? 'hobbyClass' : '']">{{val.name}}</li> 	                  				 
	                  			</ul>
	                  		</div> 	                  		
	                  	</div>
	                  	<div class="menuCx myClear">
	                  		个性签名：<input type="text" class="signature" maxlength="20" v-model="userobj.signature" @input="signature()"/>
	                  	</div>
	                  	<div class="menuCx">
							  所在城市：<Cascader class="city" :data="$cityAll" v-model="value1" style="width: 240px;height:46px;"></Cascader>																                						
	                  	</div>
	                  	<div class="menuCx">
	                  		星座：<input class="zodiacSigns" type="text" v-model="userobj.zodiacSigns" readonly/>
	                  	</div>
	                  	<div class="submit-btn myClear">
	                  		<input type="button" value="保存修改" @click="saveUser()" />
	                  	</div>
                  </div>
	          </div>
        </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            userobj:{},   //个人资料                                                      
			datePicker:'',	//出生日期   
			hobbyArr:[],	//用户兴趣爱好列表 
			hobbyList:[],	//兴趣爱好标签列表 			
			value1: [],     // 城市选择    
            img1:'',        
            files:[],        
            fileId:'',
			groupCode:"interest"			              
        }
    },
    created(){		
	   this.editordata();
	   //this.showHobby(); 
	},
	watch:{
        // 根据所选的日期自动选择星座
        datePicker(newVal,oldVal){
            if(newVal != ''){
                let d = new Date(newVal)
                let day = ''
                if(d.getDate()<10){
                    day = '0' + d.getDate()
                }else{
                    day = d.getDate()
                }
                let time=(d.getMonth() + 1).toString() + day
                let dd = `${d.getFullYear()}-${d.getMonth() + 1}-${day}`
                this.userobj.birthday = dd
                this.userobj.zodiacSigns = this.$star(time)      
            }else{
                this.zodiacSigns = ''
            }
		},
		// 城市选择
        value1(newVal,oldVal){
            this.userobj.city = `${newVal[0]}/${newVal[1]}`
        }
	},
    methods:{
		editordata(){      //编辑资料-获取个人信息       
            apiHttp.apiCenter.detail('',resp=>{          
                if(resp!=null){
				   	this.datePicker = resp.birthday;                                
                    this.userobj = resp;  
                    if(this.userobj.hobby != null){
                        this.hobbyArr = this.userobj.hobby.split(',') 
					} 					
					if(this.userobj.city!=null){
						this.value1.push(this.userobj.city);
						this.value1 = this.userobj.city.split('/')
					}					                         
				}
				this.showHobby()                                                                                                          
            })
		},
		//查询兴趣爱好标签字典表列表接口
		showHobby(){ 			                                
            let params = {
                groupCode:this.groupCode
            }            
            apiHttp.apiCenter.getHobby(this.groupCode,params,resp=>{								            
                if(resp!=null){
					this.hobbyList = resp; 					    
					const result = [];    
					this.hobbyList.forEach(h=>{
						this.$set(h,'class',false);
					})             
                    for(var i=0;i<this.hobbyArr.length;i++){
                        for(var j=0;j<this.hobbyList.length;j++){
                            if(this.hobbyArr[i]==this.hobbyList[j].name){
								result.push(this.hobbyList[j]);
							}
                        } 
					}										
					result.forEach(r=>{
						r.class=true						
					})
					
                }                                                                                    
            })                                
		},
		//选择兴趣爱好		
		selectHobby(index,val){				
			if(this.hobbyList[index].class==true){				
				this.hobbyList[index].class = false; 
				this.hobbyArr.splice(this.hobbyArr.indexOf(this.hobbyList[index].name),1);
			}else{
				 if(this.hobbyArr.length==3){    
                	this.$Message.warning("最多只能选择3个");                
				}else{				
					this.hobbyArr.push(val);
					this.hobbyList[index].class=true; 	
				} 							 
			} 								  			       
		}, 		                     
		//修改头像(上传图片)
        changeImg(event){
            let fd = new FormData()
            fd.append('model','user/head')
            if (this.$refs.avatarInput1.files.length !== 0) {
                fd.append('file', this.$refs.avatarInput1.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200){
                    this.img1 = resp.data.url
                    this.files.push(resp.data.fileId)                                 
                }                            
				this.userobj.headImg = this.img1
            })
		},
		//修改保存用户信息 
		saveUser(){ 
			//将兴趣爱好数据数组转换成字符串 
			this.userobj.hobby = this.hobbyArr.join(",")  
			var myDate = new Date()
			this.userobj.age = myDate.getFullYear() - this.$time5(this.userobj.birthday)
			let city = this.userobj.city
			let num = this.userobj.city.indexOf('/')
			let und = this.userobj.city.substring(num+1)
			if(und == 'undefined'){
				this.userobj.city = city.substring(0,num)
			}
            let params = this.userobj         
            apiHttp.apiCenter.updateUser(params,resp=>{               
                if(resp.code==200){
					this.$Message.success('修改成功！')     
					this.$parent.$parent.screening()
                }else{
					this.$Message.warning(resp.message)   
				}
            })
        },    
		// 个性签名字数限制
		signature(){
			let self = this
			if(self.userobj.signature.length > 20){
				self.userobj.signature.substring(0,20)
			}
		}
    }
}
</script>
<style scoped>
.hobbyClass{    
	background-color: #D84E4D !important; 
	color: #fff !important;
}
.myClear{
	clear: both;
}
/*上传头像*/
.step1>img{
	float: left;
	width: 160px;
	height: 160px;
	border-radius: 12px;
	margin-right: 30px;
}
.step1 .uploadFileDiv{
	float: left;
	padding-top: 60px;		
}
.step1 .uploadFile{
	position: relative;
	width: 160px;
	height: 46px;	
	border: 1px solid #D84E4D;
	border-radius: 10px;
	margin-bottom: 20px;
	text-align: center;
	color: #D84E4D;
	line-height: 44px;
	font-size: 18px;
}
.step1 .uploadFile>input{				
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
	background: none;
	z-index: 99;
	opacity: 0;
}
.step1 .uploadFileDiv>p{		
	font-size: 14px;
}
/*基础资料编辑  和  辅助资料*/
.step{
	margin-top: 50px;
}
.step input{
	padding-left: 10px;
}
.step .basicsForm label{
	margin-right: 25px;
}
.step .basicsForm input{
	display: inline-block;
	width: 240px;
	height: 46px;		
	border: 1px solid #CCCCCC;
	border-radius: 10px;
}
.step .basicsForm input[type='radio']{
	position: absolute;
	top: -20%;
	left: -20%;
	display: block;
	width: 140%;
	height: 140%;
	margin: 0px;
	padding: 0px;
	background: rgb(255, 255, 255) none repeat scroll 0% 0%;
	border: 0px none;
	opacity: 0;
}
.step .basicsForm .radio_square {
	display: inline-block;
	position: relative;
	*display: inline;
	vertical-align: middle;
	margin:0;
	padding: 0;
	width: 19px;
	height: 19px;
	background: url("../../assets/img/Request-Service/radio.png") no-repeat bottom center;
	border: none;
	cursor: pointer;
}
.step .basicsForm .radio_square.checked{
	background-position: top center;
}
.step .title>span:nth-child(1){
	display: inline-block;
	width: 6px;
	height: 20px;
	background-color: #D84E4D;
	margin-right: 15px;
	position: relative;
	top: 3px;
}
.step .title>span:nth-child(2){
	margin-right: 30px;
	font-size: 20px;
}
.step .title>span:nth-child(3){
	font-size: 14px;
	color: #D84E4D;
}
/*表单*/
.basicsForm{
	margin-top: 15px;
	padding-top: 24px;
	border-top: 1px solid #EEEEEE;
	color: #999999;
}
.basicsForm .hint{
	color: #D84E4D;
} 
.basicsForm{
	font-size: 16px;
} 
.basicsForm .margin-r{
	width: 240px;
	height: 46px;
	margin-right: 80px;
	border-radius: 10px;
	display: inline-block;
} 
.basicsForm em{
	margin-right: 34px;
} 
.basicsForm .sex{
		margin-right:6px; 
} 
.basicsForm .active{
	background: #D84E4D;
}
.basicsForm .form2{
	margin-top: 30px;
}
.basicsForm .form2 .riqi{
	background: url("../../assets/img/Request-Service/time.png") no-repeat;
	background-size: 24px;
	background-position: 200px 8px;
}
/*辅助资料编辑  */
.step .assistForm{
	margin-top: 15px;              
	color: #999999;
	padding-top: 46px;
	border-top: 1px solid #EEEEEE;  
}                
.hobbyList .hobbys>ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 13px;
	margin-bottom: 20px;
}
.hobbyList .hobbyTitle{
	float: left;
	margin-right: 20px;
}
.hobbyList .hobbys{
	float: left;
	width: 1000px;
} 
.hobbyList .hobbys li{
	margin-right: 40px;
	width: 120px;
	height: 46px;
	border: 1px solid #EEEEEE;
	border-radius: 24px;
	font-size: 16px;
	text-align: center;
	line-height: 46px;
	margin-bottom: 30px; 
}
.assistForm{
	font-size: 16px;
}
.assistForm .menuCx{
	margin-bottom: 30px;
}
.assistForm .menuCx .signature{
	width: 240px;
	height: 46px;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
}
.assistForm .menuCx .city{
	display: inline-block;
	width: 150px;
	height: 46px;
	border-radius: 10px;
	margin-right: 30px;
}
.assistForm .menuCx .zodiacSigns{
	display: inline-block;
	width: 240px;
	height: 46px;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	margin-left: 30px;				
}
.assistForm .submit-btn{
	width: 200px;
	height: 46px;
	background-color: #D84E4D;
	color: #FFFFFF;
	border-radius: 24px;
	font-size: 18px;
	margin-left: 34%;
	text-align: center;
	line-height: 46px;
	margin-top: 30px;
}
.assistForm .submit-btn>input{
	border: none;
	color: #FFFFFF;	
	background-color: #D84E4D;	
}

</style>

